import { Box, Text, VerticalStack } from "@shopify/polaris"

function ReportSummaryInfoCard({ summaryItems}) {

    return (
        <table style={{ width: "100%", borderCollapse: "collapse" }}> 
            <tbody>
                <tr>
                    {summaryItems.map((item, index) => {
                        if(item?.visible === false) return null
                        return (
                            <td key={index} style={{ border: "1px solid #DADDDF"}}>
                                <Box padding="2">   
                                    <VerticalStack gap="2">
                                        <Text color="subdued" variant='headingXs'>{item.title}</Text>
                                        {item?.isComp ? item.data : <Text variant='headingLg'>{item.data}</Text>}
                                    </VerticalStack>
                                </Box>
                            </td>
                        )
                    })}
                </tr>
            </tbody>
        </table>
    )
}

export default ReportSummaryInfoCard